<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<!--css样式引入-->
<link rel="stylesheet" th:href="@{/editormd/css/editormd.css}" />
<link th:href="@{/admin/tagsinput/jquery.tagsinput.css}" rel="stylesheet"/>
<head th:replace="admin/common::head-fragment"></head>

<body>
    <!--左边工具栏-->
    <nav th:replace="~{admin/common::navbar-fragment(active='edit.html')}"></nav>

    <div class="page">
    <!--顶部导航栏-->
        <header th:replace="admin/common::topbar-fragment"></header>
        <div id="layout">
            <div class="container-fluid">
                <!-- Page Header-->
                <div class="card-header">
                    <h3 class="card-title">发布博客</h3>
                </div>
                <div class="card-body">
                    <!-- 几个基础的输入框，名称、分类等输入框 -->
                    <form id="blogForm" onsubmit="return false;">
                        <div class="form-group" style="display:flex;">
                            <input type="hidden" id="blogId" name="blogId" th:value="${blog != null and blog.blogId != null }?${blog.blogId}: 0">
                            <input type="text" class="form-control col-sm-6" id="blogName" name="blogName"
                                   placeholder="*请输入文章标题(必填)"
                                   th:value="${blog!=null and blog.blogTitle!=null }?${blog.blogTitle}: ''"
                                   required="true">
                            &nbsp;&nbsp;
                            <input type="text" class="form-control" id="blogTags" name="blogTags"
                                   placeholder="请输入文章标签"
                                   th:value="${blog != null and blog.blogTags != null }?${blog.blogTags}: ''"
                                   style="width: 100%;">
                        </div>
                        <div class="form-group" style="display:flex;">
                            <input type="text" class="form-control col-sm-6" id="blogSubUrl"
                                   name="blogSubUrl"
                                   placeholder="请输入自定义路径,如:springboot-mybatis,默认为id"> &nbsp;&nbsp;
                            <select class="form-control select2" style="width: 100%;" id="blogCategoryId"
                                    data-placeholder="请选择分类...">
                                <th:block th:if="${null == categories}">
                                    <option value="0" selected="selected">默认分类</option>
                                </th:block>
                                <th:block th:unless="${null == categories}">
                                    <th:block th:each="category : ${categories}">
                                        <option th:value="${category.getId()}" th:text="${category.getName()}"
                                                th:selected="${null != blog and null != blog.blogCategoryId and blog.blogCategoryId == category.id} ?true:false">
                                        </option>
                                    </th:block>
                                </th:block>
                            </select>
                        </div>
                        <div id="test-editormd">
                            <!--<textarea style="display:none;" id="blog"></textarea>-->
                            <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc" id="content" th:utext="${blog !=null and blog.blogContent != null}?${blog.blogContent}:''">#Editor.md</textarea>
                        </div>
                        <div class="form-group">
                            <!-- 按钮 -->
                            &nbsp;<button class="btn btn-info float-right" style="margin-left: 5px;"
                                          id="confirmButton">保存文章
                        </button>&nbsp;
                            &nbsp;<button class="btn btn-secondary float-right" style="margin-left: 5px;"
                                          id="cancelButton">返回文章列表
                        </button>&nbsp;
                        </div>
                    </form>
                </div>
            </div>

            <div class="content">
                <!-- 模态框（Modal） -->
                <div class="modal fade" id="articleModal" tabindex="-1" role="dialog" aria-labelledby="articleModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h6 class="modal-title" id="articleModalLabel">文章信息完善</h6>
                            </div>
                            <div class="modal-body">
                                <form onsubmit="return false;">
                                    <div class="form-group">
                                        <div class="col-sm-4">
                                            <th:block th:if="${null == blog}">
                                                <!--这是展示那个摄像机的默认图片-->
                                                <img id="blogCoverImage" src="/admin/img/img-upload.png"
                                                     style="height: 64px;width: 64px;">
                                            </th:block>
                                            <th:block th:unless="${null == blog}">
                                                <img id="blogCoverImage" th:src="${blog.blogCoverImage}"
                                                     style="width:160px ;height: 120px;display:block;">
                                            </th:block>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="form-group">
                                        <div class="col-sm-4">
                                            <!--图片选择器，隐藏-->
                                            <input type="file" id="select" style="display:none;" onchange="uploadImage()" />
                                            <button class="btn btn-info" style="margin-bottom: 5px;" id="uploadCoverImage" onclick="selectImage()">
                                                <i class="fa fa-picture-o"></i>&nbsp;上传封面
                                            </button>
                                            <button class="btn btn-secondary" style="margin-bottom: 5px;"
                                                    id="randomCoverImage"><i
                                                    class="fa fa-random"></i>&nbsp;随机封面
                                            </button>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">文章状态:&nbsp;</label>
                                        <input name="blogStatus" type="radio" id="publish"
                                               checked=true
                                               th:checked="${null==blog||(null !=blog and null !=blog.blogStatus and blog.blogStatus==1)} ?true:false"
                                               value="1"/>&nbsp;发布&nbsp;
                                        <input name="blogStatus" type="radio" id="draft" value="0"
                                               th:checked="${null !=blog and null !=blog.blogStatus and blog.blogStatus==0} ?true:false"/>&nbsp;草稿&nbsp;
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">是否允许评论:&nbsp;</label>
                                        <input name="enableComment" type="radio" id="enableCommentTrue" checked=true
                                               th:checked="${null==blog||(null !=blog and null !=blog.enableComment and blog.enableComment==1)} ?true:false"
                                               value="1"/>&nbsp;是&nbsp;
                                        <input name="enableComment" type="radio" id="enableCommentFalse" value="0"
                                               th:checked="${null !=blog and null !=blog.enableComment and blog.enableComment==0} ?true:false"/>&nbsp;否&nbsp;
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" id="saveButton">确认</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.modal -->
            </div>

        </div>
        <!--底部-->
        <footer th:replace="admin/common::footer-fragment"></footer>
    </div>

    <!--javascript-->
    <div th:replace="admin/common::JavaScript-fragment"></div>

    <script type="text/javascript">
        var testEditor;

        $(function() {
            testEditor = editormd("test-editormd", {
                width   : "100%",
                height  : 640,
                emoji : true,
                searchReplace : true,
                previewCodeHighlight : true,
                path    : "/editormd/lib/",
                taskList: true,
                tex: true, // 默认不解析
                saveHTMLToTextarea : true, // 注意3：这个配置，方便post提交表单
                flowChart: true, // 默认不解析
                sequenceDiagram: true, // 默认不解析
                codeFold: true,
                htmlDecode : "style,script,iframe", // 过滤 html 部分标签
                /**上传图片相关配置如下*/
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/admin/blog/upload", // 注意你后端的上传图片服务地址
                onload: function () {   // 图片上传成功后的回调函数

                }
                /**设置主题颜色*/
                // editorTheme: "pastel-on-dark",
                // theme: "gray",
                // previewTheme: "dark"
            });
        });
    </script>
    <!-- tagsinput 就是让标签独立，可以加入多个标签 -->
    <script th:src="@{/admin/tagsinput/jquery.tagsinput.min.js}"></script>
    <!--引入自写的blog.js-->
    <script th:src="@{/admin/js/blog.js}"></script>
    <!--markdown的js文件-->
    <script th:src="@{/editormd/editormd.min.js}"></script>

</body>
</html>